<div class="box border grey" id="main-content">
    <div class="box-title">
        <h4>员工通讯录</h4>
    </div>
    <div class="box-body mainbox box-auto">
        <style>
            .angular-animate-partOne,.angular-animate-partTwo,.angular-animate-partThree{
                -webkit-transition:all linear 0.3s;
                transition:all linear 0.3s;
                display: block!important;
            }
            .angular-animate-partOne.ng-hide-add {
                position: absolute;
                margin-left: -15px;
                opacity:1;
            }
            .angular-animate-partOne.ng-hide-add.ng-hide-add-active {
                position: absolute;
                margin-left:-41.6%;
                opacity:0;
            }
            .angular-animate-partOne.ng-hide-remove{
                position: relative;
                left:-41.6%;
                opacity:0;
            }
            .angular-animate-partOne.ng-hide-remove.ng-hide-remove-active{
                position: relative;
                left: 0px;
                opacity:1;
            }
            .angular-animate-partThree.ng-hide-add {
                position: absolute;
                left: 58%;
                opacity:1;
            }
            .angular-animate-partThree.ng-hide-add.ng-hide-add-active{
                position: absolute;
                left:100%;
                opacity:0;
            }
            .angular-animate-partThree.ng-hide-remove {
                position: absolute;
                left:100%;
                opacity:0;
            }
            .angular-animate-partThree.ng-hide-remove.ng-hide-remove-active {
                position: absolute;
                left: 58%;
                opacity:1;
            }
        </style>
        <div class="col-md-5 col-sm-12 angular-animate-partOne" ng-show="showDepartment">
            <div><h4 class="text-center">部门结构</h4></div>
            <div id="chart_div"></div>
            <div class="text-center"><input type="checkbox" ng-model="containSubDepartment">包含下级部门</div>
        </div>
        <div class="angular-animate-partTwo {{showDepartment?'col-md-7':'col-md-6'}} col-sm-12">
            <div class="text-center" ng-show="showDepartment">
                <div class="btn-group">
                    <button ng-click="showDepartment=true" class="btn btn-xs btn-{{showDepartment?'info':'default'}}">&nbsp;&nbsp;按组织结构&nbsp;&nbsp;</button>
                    <button ng-click="showDepartment=false" class="btn btn-xs btn-{{showDepartment?'default':'primary'}}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Aris&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button>
                </div>
            </div>
            <div class="row  margin-top-10">
                <div class="col-md-3">
                    <button ng-click="clearFilter()" class="btn btn-success">清空筛选条件</button>
                </div>
                <div class="col-md-9 search">
                    <input class="search form-control" type="text" placeholder="Search" ng-model="filterInfos.name"><i class="fa fa-search search-icon"></i>
                </div>
            </div>
            <table class="table border table-hover">
                <thead>
                <tr>
                    <th class="oneIn10">姓名</th><th class="oneIn10">性别</th><th class="oneIn10">部门</th><th class="oneIn10">职位</th><th class="oneIn5">电话</th><th class="oneIn5">手机</th><th class="oneIn5">Email</th>
                </tr>
                </thead>
                <tbody>
                <tr class="pointer-hand" ng-repeat="item in orgContactList|filter:contactFilter" ng-click="changePresentContact(item.id)">
                    <td>{{item.baseInfo.name}}</td>
                    <td>{{item.baseInfo.gender==1?"男":item.baseInfo.gender==0?"女":""}}</td>
                    <td>{{getDepartmentNameById(item.employeeInfo.department)}}</td>
                    <td>{{item.employeeInfo.position}}</td>
                    <td>{{getOpenValue(item.baseInfo.fixedNumberList)}}</td>
                    <td>{{getOpenValue(item.baseInfo.mobileNumberList)}}</td>
                    <td>{{getOpenValue(item.baseInfo.emailList)}}</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="col-md-6 angular-animate-partThree" ng-show="!showDepartment">
            <div class="text-center" ng-if="!showDepartment">
                <div class="btn-group">
                    <button ng-click="$parent.showDepartment=true" class="btn btn-xs btn-{{showDepartment?'info':'default'}}">&nbsp;&nbsp;按组织结构&nbsp;&nbsp;</button>
                    <button ng-click="$parent.showDepartment=false" class="btn btn-xs btn-{{showDepartment?'default':'primary'}}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Aris&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button>
                </div>
            </div>
            <div>
                <span ng-if="presentContact==undefined&&!showDepartment">您还没有选中任何联系人</span>
                <div ng-if="presentContact!=undefined">
                    <div class="row margin-top-10">
                        <div class="col-md-3 text-center">
                            汇报链:
                        </div>
                        <div class="col-md-9">
                            <div class="oneIn{{chain.length}} inline text-center {{!$last?'pointer-hand':''}}" ng-click="changePresentContact(item.id)" ng-repeat="item in chain">{{item.baseInfo.name}}{{!$last?'>>':''}}</div>
                        </div>
                    </div>
                    <div class="row margin-top-10">
                        <div class="col-md-6">
                            <table class="table border table-hover">
                                <tbody>
                                    <tr><th>姓名:</th><td>{{presentContact.baseInfo.name}}</td></tr>
                                    <tr><th>性别:</th><td>{{presentContact.baseInfo.gender==1?'男':presentContact.baseInfo.gender==0?'女':'未设置'}}</td></tr>
                                    <tr><th>部门:</th><td>{{getDepartmentNameById(presentContact.employeeInfo.department)}}</td></tr>
                                    <tr><th>职位:</th><td>{{presentContact.employeeInfo.position}}</td></tr>
                                    <tr><th>电话:</th><td>{{getOpenValue(presentContact.baseInfo.fixedNumberList)}}</td></tr>
                                    <tr><th>手机:</th><td>{{getOpenValue(presentContact.baseInfo.mobileNumberList)}}</td></tr>
                                    <tr><th>邮箱:</th><td>{{getOpenValue(presentContact.baseInfo.emailList)}}</td></tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <img ng-src="{{presentContact.baseInfo.photoUrl!=undefined&&presentContact.baseInfo.photoUrl!=null?presentContact.baseInfo.photoUrl:'assets/img/addressbook/1.jpg'}}">
                        </div>
                    </div>
                    <div class="margin-top-10">
                        <div class="col-md-3 text-center">
                            下属:
                        </div>
                        <div class="col-md-9">
                            <div class="oneIn{{subordinate.length}} text-center inline pointer-hand" ng-repeat="item in subordinate"><a ng-click="changePresentContact(item.id)">{{item.baseInfo.name}}</a>{{!$last?'&nbsp;&nbsp;&nbsp;&nbsp;':''}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>